<template>
<div>

<view class="content">
<image class='background' src="../../static/images/review_back.jpg" mode="aspectFill"></image>
</view>
<div class="weui-flex">
<div class="weui-flex__item">
<div class="placeholder2">
<image class="titleicons" src="../../static/icons/grade.png" mode="aspectFill"></image></div>
</div>
<div class="weui-flex__item">
<div class="placeholder2">
<image class="titleicons" src="../../static/icons/subject.png" mode="aspectFill"></image></div>
</div>
</div>
<div class="weui-flex">
<div class="weui-flex__item">
<div class="placeholder">{{grade}}</div>
</div>
<div class="weui-flex__item">
<div class="placeholder">{{subject}}</div>
</div>
</div>
<div v-if="(wrongtitlesLength>=10)">
<div class="warn" :hidden="!isbegin">
<div class="warntext" > 测试时间10分钟，从未攻克错题中随机抽取20题进行测试。中途不可退出不可暂停，点击开始按
钮以开始考试。</div>
</div>
<div class="btn_begin1"><button v-if="isbegin" class="btn_begin" hover-class="btn_begin_hover" plain="true"   @click="begin()">{{content1}}</button></div>

<button class="btn_countdown"  hover-class="btn_countdown_hover"  plain="true" size="default" :hidden="isbegin" @click="endit1()">{{content5}}</button>
<div v-if="(!isbegin)&&(!issubmit)"> <image class="clockicons" src="../../static/icons/clock.png" mode="aspectFill"></image></div>


<div class="weui-flex">
<div class="weui-flex__item">

<div class="question" v-if="!isbegin">

<div class="weui-flex">
<div class="weui-flex__item">
<div class="title">{{questionIndex+1}}、({{questions[questionIndex].type1}}){{questions[questionIndex].q}}

<div class="weui-flex">
<div class="weui-flex__item">
<div class="answer">
<div v-if="(questions[questionIndex].type1==='单选题')||(questions[questionIndex].type1==='判断题')"> 
<radio-group class="choiceanswer"  @change="radioChange"  >
<label  v-for="(item,index) in questions[questionIndex].p" :key="index"  >
<div class="weui-flex">
<div class="weui-flex__item">
  <div class="xxx"><input class="answerradio" type="radio"  :value="item.value" :checked="questions[questionIndex].p[index].ischecked" :disabled="!isdone" >
<div>{{item.value}}</div></div>

</div></div>
</label>
</radio-group>
</div>

<div v-else-if="questions[questionIndex].type1==='多选题'">
<checkbox-group class="choiceanswer"  @change="checkboxChange"  >
<label  v-for="(item,index) in questions[questionIndex].p" :key="index"  >
<div class="weui-flex">
<div class="weui-flex__item">
  <div class="xxx">
<input class="answercheckbox" type="checkbox"  :value="item.value" :checked="questions[questionIndex].p[index].ischecked" :disabled="!isdone" ><div> {{item.value}}</div>
</div></div></div>
</label>
</checkbox-group>
</div>

<div  v-else-if="questions[questionIndex].type1==='填空题'">
<input class="inputarea"  type="text"  :placeholder="content6"  v-model="message" :disabled="!isdone" >
</div>

<div class="weui-flex">
<div class="weui-flex__item">
<div class="rightanswer" :hidden="ischeck">
<div v-if="questions[questionIndex].isright" >回答正确</div>
<div v-else>正确答案：{{questions[questionIndex].ra}} </div>
</div>
</div>
</div>

</div>
</div>
</div>


</div>
</div>
</div>
</div>

</div>
</div>

<div class="btn2">
<button class="btn_up" hover-class="btn_up_hover" size="mini"  plain="true" :disabled="isup " :hidden="isbegin" @click="up()">{{content2}}</button>
<button class="btn_down" hover-class="btn_down_hover" size="mini"  plain="true" :disabled="isdown" :hidden="isbegin" @click="down()">{{content3}}</button>
<button class="btn_submit" hover-class="btn_submit_hover" size="mini"  plain="true" :disabled="isbegin" :hidden="isbegin"  @click="submit1()">{{content4}}</button>
</div>
<image class='pickNum' hover-class="pickNum_hover" src="../../static/icons/pickNum2.png" mode="aspectFit" :hidden="isbegin" @click="pick()"></image>
<div id="main">
<div class="box" v-if="vm.dialogShow" style="z-index:999" >
<div id="dialog1" >
<div id="dialog" >
<button v-for="item2 in pickNumList" :key="item2"   class="btn_pickNum" plain="true" size="mini" style="border-color:#FFB5C5;" @click="pickNum(item2)">{{item2}}
<div v-if="questions[item2-1].ya.length!==0" class="btn_pickNum2" hover-class="btn_pickNum2_hover" style="color:white;background-color:#FFB5C5;">{{item2}}</div>
<div v-if="!questions[item2-1].isright&&issubmit" class="btn_pickNum2" style="color:white;background-color:red;">{{item2}}</div>
<div v-if="questions[item2-1].isright&&issubmit" class="btn_pickNum2" style="color:white;background-color:green;">{{item2}}</div>
</button>
</div>
</div>
</div>
</div>
 </div >
<div v-else>
<div class="warn" :hidden="!isbegin">
<div class="warntext" > 该年级科目错题数较少，暂不开放错题测试功能</div>
</div>
</div>
</div>
</template>

<script>

export default {
  data () {
    return {
      questionIndex: 0,
      grade: 0,
      subject: '',
      isbegin: true,
      isup: true,
      isdown: true,
      isdone: true,
      issubmit: false,
      ischeck: true,
      isend: false,
      score: 0,
      message: '',
      questionNum: 10,
      pickNumber: 0,
      randomNum: [],
      content1: '开始',
      content2: '上题',
      content3: '下题',
      content4: '交卷',
      content5: '00:00',
      content6: '请在此输入答案',
      content7: '',
      totalTime: 600,
      pickNumList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      wrongtitles: [],
      wrongtitlesLength: 0,
      questions: [],
      vm: {
        dialogShow: false
      }
    }
  },
  methods: {
    radioChange: function (e) {
      for (var index2 = 0; index2 < this.questions[this.questionIndex].p.length; ++index2) {
        this.questions[this.questionIndex].p[index2].ischecked = false
      }
      for (var index1 = 0; index1 < this.questions[this.questionIndex].p.length; ++index1) {
        if (e.mp.detail.value === this.questions[this.questionIndex].p[index1].value) {
          this.questions[this.questionIndex].p[index1].ischecked = true
        }
      }
      this.questions[this.questionIndex].ya.length = 0
      this.questions[this.questionIndex].ya.push(e.mp.detail.value)
    },
    checkboxChange: function (e) {
      for (var index2 = 0; index2 < this.questions[this.questionIndex].p.length; ++index2) {
        this.questions[this.questionIndex].p[index2].ischecked = false
      }
      for (var index4 = 0; index4 < this.questions[this.questionIndex].p.length; ++index4) {
        for (var index5 = 0; index5 < e.mp.detail.value.length; ++index5) {
          if (e.mp.detail.value[index5] === this.questions[this.questionIndex].p[index4].value) {
            this.questions[this.questionIndex].p[index4].ischecked = true
          }
        }
      }
      this.questions[this.questionIndex].ya.length = 0
      this.questions[this.questionIndex].ya = e.mp.detail.value
    },
    begin () {
      this.getquestions()
      this.isbegin = false
      this.content2 = '首题'
      this.isdown = false
      this.countdown()
    },
    getquestions () {
      this.random()
      var arry = [10]
      for (var index2 = 0; index2 < 10; ++index2) {
        var p = []
        for (var index3 = 0; index3 < this.wrongtitles[this.randomNum[index2]].questionOption.length; ++index3) {
          p[index3] = {value: this.wrongtitles[this.randomNum[index2]].questionOption[index3], ischecked: false}
        }
        arry[index2] = {
          id: this.wrongtitles[this.randomNum[index2]].questionId,
          type1: this.wrongtitles[this.randomNum[index2]].type,
          q: this.wrongtitles[this.randomNum[index2]].questionContent,
          ra: this.wrongtitles[this.randomNum[index2]].questionAnswer,
          ya: [],
          isright: false,
          p
        }
      }
      this.questions = arry
    },
    countdown () {
      let clock = setInterval(() => {
        var minute = parseInt(this.totalTime / 60)
        var second = parseInt(this.totalTime % 60)
        this.totalTime--
        if (minute < 10) {
          if (second < 10) {
            this.content5 = '0' + minute + ':' + '0' + second
          } else {
            this.content5 = '0' + minute + ':' + second
          }
        } else {
          if (second < 10) {
            this.content5 = minute + ':' + '0' + second
          } else {
            this.content5 = minute + ':' + second
          }
        }
        if (this.totalTime < 0) {
          clearInterval(clock)
          this.isdone = false
          this.content6 = '已超出时间或已交卷'
          if (!this.issubmit) {
            this.content5 = '时间到 请交卷'
          } else {
            this.content5 = '请核对答案 点此结束测试'
          }
        }
      }, 1000)
    },
    up () {
      if (this.questions[this.questionIndex].type1 === '填空题') {
        if (this.message !== '') {
          this.questions[this.questionIndex].ya.length = 0
          this.questions[this.questionIndex].ya.push(this.message)
        }
      }

      this.questionIndex = this.questionIndex - 1
      if (this.questions[this.questionIndex].type1 === '填空题') {
        if (this.questions[this.questionIndex].ya.length === 0) {
          this.message = ''
        } else {
          this.message = this.questions[this.questionIndex].ya[0]
        }
      }

      this.content3 = '下题'
      this.isdown = false
      if (this.questionIndex === 0) {
        this.content2 = '首题'
        this.isup = true
      }
    },
    down () {
      if (this.questions[this.questionIndex].type1 === '填空题') {
        if (this.message !== '') {
          this.questions[this.questionIndex].ya.length = 0
          this.questions[this.questionIndex].ya.push(this.message)
        }
      }

      this.questionIndex = this.questionIndex + 1
      if (this.questions[this.questionIndex].type1 === '填空题') {
        if (this.questions[this.questionIndex].ya.length === 0) {
          this.message = ''
        } else {
          this.message = this.questions[this.questionIndex].ya[0]
        }
      }
      this.content2 = '上题'
      this.isup = false
      if (this.questionIndex === (this.questionNum - 1)) {
        this.content3 = '末题'
        this.isdown = true
      }
    },
    pick () {
      this.vm.dialogShow = true
    },
    pickNum (e) {
      if (this.questions[this.questionIndex].type1 === '填空题') {
        if (this.message !== '') {
          this.questions[this.questionIndex].ya.length = 0
          this.questions[this.questionIndex].ya.push(this.message)
        }
      }
      var e2 = this.questionIndex
      this.questionIndex = e - 1
      if (this.questions[this.questionIndex].type1 === '填空题') {
        if (this.questions[this.questionIndex].ya.length === 0) {
          this.message = ''
        } else {
          this.message = this.questions[this.questionIndex].ya[0]
        }
      }
      if (this.questionIndex < e2) {
        this.content3 = '下题'
        this.isdown = false
        if (this.questionIndex === 0) {
          this.content2 = '首题'
          this.isup = true
        }
      } else if (this.questionIndex > e2) {
        this.content2 = '上题'
        this.isup = false
        if (this.questionIndex === (this.questionNum - 1)) {
          this.content3 = '末题'
          this.isdown = true
        }
      } else if (this.questionIndex === e2) {
        if (this.questionIndex === 0) { this.content2 = '首题' }
        if (this.questionIndex === (this.questionNum - 1)) { this.content3 = '末题' }
      }
      this.vm.dialogShow = false
    },
    submit1 () {
      let _that = this
      if (!this.issubmit) {
        wx.showModal({
          title: '交卷',
          content: '确认交卷后无法更改答案哦',
          confirmText: '确认',
          cancelText: '取消',
          success: function (res) {
            if (res.confirm) {
              _that.submit2()
              _that.showscore()
            } else {
            }
          }
        })
      } else {
        this.showscore()
      }
    },
    submit2 () {
      this.ischeck = false
      this.issubmit = true
      this.isdone = false
      this.totalTime = 0
      this.content6 = '已超出时间或已交卷'
      this.content5 = '请核对答案 点此结束测试'
      this.content4 = '成绩'
      if (this.questions[this.questionIndex].type1 === '填空题') {
        this.questions[this.questionIndex].ya.length = 0
        this.questions[this.questionIndex].ya.push(this.message)
      }
      var count = 0
      for (var index = 0; index < this.questionNum; ++index) {
        if (this.questions[index].type1 !== '多选题') {
          if (this.questions[index].ra[0] === this.questions[index].ya[0]) {
            this.questions[index].isright = true
            ++count
          }
        } else {
          var count2 = 0
          if (this.questions[index].ya.length !== this.questions[index].ra.length) {
            this.questions[index].isright = false
          } else {
            for (var index6 = 0; index6 < this.questions[index].ra.length; ++index6) {
              for (var index7 = 0; index7 < this.questions[index].ya.length; ++index7) {
                if (this.questions[index].ra[index6] === this.questions[index].ya[index7]) {
                  ++count2
                  continue
                }
              }
            }
          }

          if (count2 === this.questions[index].ra.length) {
            this.questions[index].isright = true
            ++count
          }
        }
      }
      this.score = count * 10
      console.log(this.questions)
    },
    showscore () {
      wx.showModal({
        title: '成绩',
        content: this.score + '分',
        confirmText: '查看详情',
        showCancel: false
      })
    },
    endit1 () {
      let _that = this
      if (this.issubmit) {
        wx.showModal({
          title: '退出测试',
          content: '是否退出本次测试',
          confirmText: '确认',
          cancelText: '取消',
          success: function (res) {
            if (res.confirm) {
              _that.resetdata()
            } else {
            }
          }
        })
      }
    },

    random () {
      let _that = this
      _that.randomNum.length = 0
      while (_that.randomNum.length < 10) {
        var Num = Math.round(Math.random() * (_that.wrongtitles.length - 1))
        if (_that.randomNum.length === 0) { _that.randomNum.push(Num) } else {
          for (var i = 0; i < _that.randomNum.length; i++) {
            if (_that.randomNum.join(',').indexOf(Num) < 0) {
              _that.randomNum.push(Num)
            }
          }
        }
      }
    },
    resetdata () {
      this.questionIndex = 0
      this.isbegin = true
      this.isup = true
      this.isdown = true
      this.isdone = true
      this.issubmit = false
      this.ischeck = true
      this.isend = false
      this.score = 0
      this.message = ''
      this.pickNumber = 0
      this.randomNum.length = 0
      this.content1 = '开始'
      this.content2 = '上题'
      this.content3 = '下题'
      this.content4 = '交卷'
      this.content5 = '00:00'
      this.content6 = '请在此输入答案'
      this.content7 = ''
      this.totalTime = 600
      this.pickNumList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
      this.questions.length = 0
    },
    requestWrongList () {
      let _that = this
      var api = 'http://120.25.78.18:8010/api/userSubjectTitle?id=1&grade=' + this.grade + '&subject=' + this.subject
      wx.request({
        url: api, // 仅为示例，并非真实的接口地址
        header: {
          'content-type': 'application/json' // 默认值
        },
        success (res) {
          _that.wrongtitles = res.data
          _that.wrongtitlesLength = res.data.length
        }
      })
    }

  },
  onLoad: function (option) {
    this.grade = option.grade
    this.subject = option.subject
    this.requestWrongList()
  }
}
</script>

<style scoped>
.pickNum{
position: absolute;
width:8%;
height: 8%;
top:80%;
left:88%;
}

.plus{
display: flex;
position: absolute;
justify-content: center;
text-align:center;
}
.btn3{
display: flex;
flex-direction: row;
position: absolute;
top: 80%;
}
.yes{
left:30%
}
.no{
left:45%
}
.btn2 {
display: flex;
width:60%;
left: 0%;
position: fixed;
bottom:10%
}
.btn_up {
color: black;
background-color: rgb(252, 172, 178);
border-color: rgb(252, 172, 178);    
left:30%;

}
.btn_down {
color: black;
background-color: rgb(252, 172, 178);
border-color: rgb(252, 172, 178);
left:35%
}
.btn_submit{
color: black;
background-color: rgb(252, 172, 178);
border-color: rgb(252, 172, 178);
left:40%
}
.btn_up_hover{
  opacity: 0.5;
}
.btn_down_hover{
  opacity: 0.5;
}
.btn_submit_hover{
  opacity: 0.5;
}
.pickNum_hover{
  opacity: 0.5;
}


.placeholder {
margin: 5px;
padding: 0 10px;
height: 2.3em;
line-height: 1em;
text-align: center;
}
.placeholder2 {
margin-left: 65px;
margin-right: 5px;
margin-top:15px;
margin-bottom: 5px;
padding: 0 10px;
height: 2.3em;
line-height: 1em;
}
.titleicons{
  position:absolute;
  width:10%;
  height: 6%;
}
.question{       
width: 80%;
height: 50%;
border-radius: 15rpx;
color:rgb(34, 31, 31);
background-color: #FFB5C5;
position: absolute;
top: 30%;
right: 0%;
left: 0%;
margin: auto;
line-height: 80rpx;
overflow-y: auto;
}
.title{
margin: 5px;
  padding: 5px 5px;
  text-align: left;
  height: 2.3em;
  line-height: 2.3em;
}
.answer{
  margin: 5px;
  padding: 5px 5px;
  text-align: center;
  height: 2.3em;
  line-height: 2.3em;
}

.rightanswer{
 margin: 5px;
  padding: 5px 5px;
  text-align: center;
  height: 2.3em;
  line-height: 2.3em;
}
.btn_begin1{
width:80%;
left: 10%;
position: absolute;
bottom:240rpx;
}
.btn_begin{
color: black;
background-color: #FFB5C5;
border-color: #FFB5C5;
width: 100%;
position: relative;
}
.btn_begin_hover{
  opacity: 0.5;
}
.warn{
color:black;
background-color:#FFB5C5;
border-radius: 20rpx;
width:80%;
position: absolute;
top:20%;
left:0%;
right: 0%;
margin: auto;
}
.warntext{
width: 80%;
line-height: 80rpx;
left:0%;
right: 0%;
margin: auto;
}
.btn_countdown{
color: black;
background-color: #FFB5C5;;
border-color: #FFB5C5;;
width:80%;
}

.btn_countdown_hover{
  opacity: 0.5;
}
.clockicons{
position: absolute;
top:112.5px;
left:120px;
  width:8%;
  height: 5%;
}

#main{
width: 100%;
height: 100%;
}
#dialog1{
border-radius: 20px;
text-align: center;
width: 90%;
height: 25%;
position: fixed;
left: 0;
right:0;
bottom:20%;
margin: auto;
background-color: white;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#dialog{
border-radius: 20px;
text-align: center;
width: 80%;
height: 100%;
position: absolute;
left: 0;
right:5%;
top:10rpx;
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.3);
}
.btn_check{
color: white;
background-color: #FFB5C5;;
position: absolute;
top: 80%;
right: 30%;
left: 30%;
}
.btn_check:hover{
  opacity: 0.5;
}
.background {
width: 100%;
height: 100%;
position:fixed; 
background-size:100% 100%;
z-index: -1;
}
.btn_pickNum{
color:#FFB5C5;
display: flex;
width:0rpx;
height: 38px;
border-radius: 100%;
margin-top: 10px;
margin-left: 15px;
align-items: left;
justify-content: center;
}
.btn_pickNum2{
position:absolute;  
width:100%;
height: 100%;
left:0;
top:0;
}
.btn_pickNum2_hover{
  opacity: 0.5;
}
.xxx{
  display: flex;
  flex-direction: row;
  text-align: left;
}
</style>


